<template>
  <div class="collapse-container">
    <el-collapse v-model="activeNames" accordion @change="handleChange">
      <el-collapse-item name="1">
        <template slot="title">
          <i
            :class="activeNames == '1' ? 'el-icon-minus' : 'el-icon-plus'"
          />
          <div class="order-source">
            <span>预选单来源：</span><span>13800138000（张三）</span>
          </div>
          <div class="delivery-address">
            <div class="label-name">收货地址：</div><div class="address">天津省-天津市-和平区-111,某2,18520640817</div>
          </div>
          <div class="del-btn" @click="toShowApprovedLogging">
            删除
          </div>
        </template>
        <div class="content-item">
          <div class="monopoly-container">
            <div class="store-container">
              <div class="store-name">
                <span>店铺： </span><span>仪器仪表专卖</span>
              </div>

              <div class="order-num">
                <span>预选单号：</span><span>20191029144030932-3333</span>
              </div>
            </div>
            <div class="warehouse-item">
              <div class="warehouse-info">
                <img src="../../../assets/images/warehouse.png" alt="">
                <span>天河仓库</span>
              </div>
              <div class="goods-list">
                <div class="goods-item">
                  <img src="../../../assets/images/steel.png" alt="">
                  <div class="item-info">
                    <div class="name">
                      <span>钢管</span>
                      <i
                        style="padding-left: 10px;color: #ff3b30;font-size:13px;cursor:pointer"
                        class="iconfont icon-view-text"
                        @click="toSearchResult"
                      />
                    </div>
                    <div class="mark">标 号：外16内6.03</div>
                    <div class="mark">标 号：外16内6.03</div>
                    <div class="mark">标 号：外16内6.03</div>
                  </div>
                  <div class="univalence">58.00</div>
                  <div class="numble">1</div>
                  <div class="total-price">
                    58.00
                  </div>
                </div>
              </div>
              <div class="money-container">
                <div class="money-details">
                  <div class="total-money">2件商品，总商品金额：￥116.00</div>
                  <div class="transportation">运输里程：200.00km</div>
                  <div class="transportation-money">
                    <span>运费总价：</span><span
                      class="all-money"
                      @click="toFreight"
                    >￥20.00></span>
                  </div>
                </div>
                <div class="total-money">
                  店铺合计：￥116.00
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="count-container">
          <div class="count">

            <div class="count-content">
              共<span>4件</span>，合计：<span
                class="red-txt"
              >￥</span><span class="red-txt txt">166</span>
            </div>
          </div>
          <button class="settle-accounts" @click="calculate">结算</button>
        </div>
      </el-collapse-item>
    </el-collapse>

  </div>
</template>

<script>
export default {
  props: {
    showCount: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isCheckedAll: false,
      activeNames: '0'
    }
  },
  methods: {
    // 点击展开
    handleChange(val) {
      if (val) {
        // 发请求
        this.activeNames = val
        console.log(val)
        console.log('sdffds')
      }
    },
    selectAll() {

    },
    calculate() {},
    toSearchResult() {
      // 去搜索页面
    },
    toShowApprovedLogging() {},
    toFreight() {}
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-icon-success{
color: #ff3b30;
font-size: 15px;
}
::v-deep .el-icon-circle-check{
font-size: 15px;
}
.count-container {
  background-color: #f5f5f5;
  // margin-top: 23px;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  align-items: flex-end;
  flex-direction: column;
  height: 126px;
  padding: 23px;
  .count {
    background-color: #fff;
display: flex;
align-items: center;
// justify-content: center;
.check-label{
  display: flex;
  // justify-content: center;
  margin-right: 10px;
  align-items: center;
}
.count-content{
   display: flex;
  // justify-content: center;
  align-items: center;
}
    .red-txt {
      color: #ff3b30ff;
    }
    .txt {
      font-size: 18px;
    }
  }
  .settle-accounts {
    width: 107px;
    height: 40px;
    color: #fff;
    line-height: 47px;
    text-align: center;
    border-radius: 4px;
    background-color: #e03523ff;
    font-size: 16px;
  }
  .settle-accounts:hover {
    cursor: pointer;
  }
}
.el-icon-plus:before {
  font-weight: 700;
  color: #10b2d4ff;
}
.el-icon-minus:before {
  font-weight: 700;
  color: #10b2d4ff;
}
.collapse-container {
  background-color: #f7f7f7;
  // padding-bottom: 12px;
}
::v-deep .el-collapse-item__header {
  height: 52px;
  padding: 0 30px;
  display: flex;
//   justify-content: space-between;
  border: none;
  .del-btn {

    color: #02a9f1ff;
    margin-right: 0;
  }
 .del-btn:hover{
     cursor: pointer;
 }
  .order-source {
    min-width: 215px;
    margin-left: 10px;
    // margin: 0 40px 0 0;
  }
   .delivery-address {
    margin: 0 0 0 10px;
    height: 52px;
    display: flex;
    align-items: center;
    flex: 1;
    .label-name {
      width: 65px;
      height: 52px;
    }
    .address{
    width: 385px;
    height: 52px;
    display: flex;
   line-height: 20px;
    align-items: center;
    }
  }
}
.content-item {
  .monopoly-container {
    .store-container {
      padding: 17px 24px 0px 20px;
      display: flex;
      background-color: #fff;
      color: #3d3d3dff;
      display: flex;
      justify-content: space-between;
      font-weight: 600;
      // margin-bottom: 20px;
    }
       .warehouse-item {
        padding: 0px 0 10px 0px;
        background-color: #fff;

        .warehouse-info {
          padding: 0px 18px 10px 20px;
          display: flex;
          align-items: center;
          border-bottom: 1px dashed #e5e5e5;
          margin-bottom: 20px;
          img {
            width: 11px;
            height: 11px;
            object-fit: cover;
            margin: 0 10px 0 0;
          }
          span {
            color: #a7a7aaff;
          }
        }
      }
      .warehouse-item:last-child {
        padding-bottom: 0;

      }
    .goods-list {
      background-color: #fff;

      .goods-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 14px;
        padding: 20px 60px 0 20px;
          padding-top: 0;
        img {
          width: 83px;
          height: 83px;
          object-fit: cover;
        }
        .item-info {
          height: 83px;
          margin-left: 30px;
          margin-right: 440px;
          .mark {
            font-size: 12px;
            color: #a7a7aa;
          }
        }
        .univalence {
        }
        .numble {
          margin: 0 89px 0 106px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .total-price {
          // margin-right: 106px;
        }
        .results-page {
          color: #6b6b6bff;
          span {
            margin-left: 10px;
          }
        }
        .results-page {
          cursor: pointer;
        }
      }
      .goods-item:last-child {
        margin-bottom: 15px;

      }
    }
  }
  .money-container {
    // margin-bottom: 20px;
    height: 69px;
    padding: 15px;
    display: flex;
    background-color: #fff;
    align-items: flex-end;
    justify-content: space-between;
    flex-direction: column;
    color: #6b6b6b;
    border: 1px solid #E5E5E5FF;
    border-top: 3px solid #E03523FF;
    .money-details {
      display: flex;
      .transportation {
        margin: 0 25px;
      }
      .transportation-money {
        .all-money {
          color: #02a9f1;
        }
        .all-money:hover {
          cursor: pointer;
        }
      }
    }
  }
}
</style>
